<script setup>
import {ref} from "vue";
import { useRouter, useRoute } from "vue-router";
import {ElLoading, ElMessage} from "element-plus";
import {http} from "@/api";
const apiKey = 'Coupon'
const router = useRouter()
const route = useRoute()
const id = route.params.id
const formData = ref({
  id: undefined,
  name: "",
  value: '',
  mini_value: '',
  max_value: '',
  start_time: '',
  end_time: '',
})
const rules = ref({
  name: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  value: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  mini_value: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  max_value: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  start_time: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  end_time: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
})

const formRef =  ref(null)
if (id) {
  // 获取详情
  http[apiKey].read(id).then(res => {
    for (const valueKey in formData.value) {
      formData.value[valueKey] = res.data[valueKey]
    }
    formData.value.id = id
  })
}
const cancel = () => {
  router.back()
}
const confirm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const loadingInstance = ElLoading.service()
      if (id) {
        // 编辑
        http[apiKey].update({
          ...formData.value,
          id
        }).then(res => {
          ElMessage.success('编辑成功')
          router.back()
        }).finally(() => {
          loadingInstance.close()
        })
      } else {
        // 新增
        http[apiKey].create(formData.value).then(res => {
          ElMessage.success('新增成功')
          router.back()
        }).finally(() => {
          loadingInstance.close()
        })
      }
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
</script>

<template>
  <PageMain :title="id ? '编辑' :'新增'">
    <div class="form-content f-c ">
      <div class="form-box form-box2">
        <el-form ref="formRef" style="width: 660px" :model="formData" :rules="rules" label-position="top" >
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="名称" prop="name">
                <el-input clearable v-model="formData.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="面值" prop="value">
                <el-input type="number" clearable v-model="formData.value"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最小使用金额" prop="mini_value">
                <el-input type="number" clearable v-model="formData.mini_value"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开始时间" prop="start_time">
                <el-date-picker
                  v-model="formData.start_time"
                  type="datetime"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间" prop="end_time">
                <el-date-picker
                    v-model="formData.end_time"
                    type="datetime"
                    placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="form-button f-s">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </div>
    </div>
  </PageMain>
</template>
